Created: December 12, 2025 Workshop: Franz Enzenhofer Vibe Coding Workshop
After this workshop, you can:
Mac (choose one):
Option 1 - Install script (recommended):
curl -fsSL https://claude.ai/install.sh | bashOption 2 - Homebrew:
brew install --cask claude-codeOption 3 - npm (requires Node.js 18+):
npm install -g @anthropic-ai/claude-codeWindows (PowerShell):
irm https://claude.ai/install.ps1 | iexOfficial docs: code.claude.com/docs
Mac/Linux (choose one):
Option 1 - npm (requires Node.js 18+):
npm install -g @openai/codexOption 2 - Homebrew (Mac only):
brew install --cask codexWindows: Experimental support - use WSL (Windows Subsystem for Linux) for best results.
Official docs: github.com/openai/codex
Just run the tool - it opens your browser to log in:
Claude Code:
claudeOpenAI Codex:
codexStep 1: Get your API key:
Step 2: Set your API key (copy, replace YOUR_KEY_HERE, paste in terminal):
Mac/Linux:
# For Claude Code - paste this, then run claude
export ANTHROPIC_API_KEY="YOUR_KEY_HERE"# For Codex - paste this, then run codex
export OPENAI_API_KEY="YOUR_KEY_HERE"Windows PowerShell:
# For Claude Code - paste this, then run claude
$env:ANTHROPIC_API_KEY="YOUR_KEY_HERE"# For Codex - paste this, then run codex
$env:OPENAI_API_KEY="YOUR_KEY_HERE"Step 3: Now run the tool:
Claude Code:
claudeOpenAI Codex:
codexProblems? Copy your error message and ask ChatGPT or Claude.ai: > “I’m getting this error: [paste error]. How do I fix it?”
Copy and paste these to skip all “are you sure?” prompts:
Claude Code - YOLO mode:
claude --dangerously-skip-permissionsClaude Code - YOLO + continue last session:
claude --dangerously-skip-permissions --continueCodex - Full YOLO mode:
codex --yoloCodex - Moderate mode (asks only on failures):
codex --full-autoWant shorter commands? Ask AI to create aliases for you:
Mac/Linux - copy and paste this prompt:
Create permanent shell aliases for me: claude+ for Claude Code YOLO mode, claude++ for YOLO with continue, codex+ for Codex YOLO. Detect which shell I use and add them to the correct config file so they work every time I open terminal.
Windows PowerShell - copy and paste this prompt:
Create permanent PowerShell aliases for me: claude+ for Claude Code YOLO mode, claude++ for YOLO with continue, codex+ for Codex YOLO. Add them to my PowerShell profile so they work every time I open PowerShell.
This file tells AI who you are and how to work. Both tools use the same concept - just different filenames!
To create your memory file, just type inside the AI tool:
/init
Or ask the AI: “Create a global CLAUDE.md (or AGENTS.md) file for me with my preferences.”
# My AI Coding Config
## About Me
- Non-technical user learning to code with AI
- Focus: Web projects, automation, data processing
- Explain things simply, I'm still learning
## My API Keys (KEEP PRIVATE!)
# ANTHROPIC_API_KEY=sk-ant-...
# OPENAI_API_KEY=sk-...
# GEMINI_API_KEY=AIza...
# GITHUB_TOKEN=ghp_...
## Safety Rules - ALWAYS FOLLOW
- NEVER delete entire directories - move to Trash instead
- ALWAYS use git commits before major changes
- NEVER expose API keys in code pushed to GitHub
- ASK before running destructive commands (rm -rf, DROP TABLE, etc.)
## Code Practices
- Keep it simple (KISS) - readable > clever
- Don't repeat code (DRY) - use functions
- MODULAR - small files, small functions, easy to understand
- Add comments only for complex logic
## Debugging Rules
- Always check console/terminal for errors first
- Use console.log() or print() to trace issues
- Read error messages carefully - they tell you what's wrong
- Google the exact error message if stuck
## Git Workflow
- Commit often with clear messages
- Push to GitHub = backup!
- Never force push to main
## Project Structure Preferences
- Keep related files together
- Use clear, descriptive names
- README.md in every projectKeep it under 100 lines. The AI reads this every time - shorter = better.
What: Cloud storage for code Why we use it:
Just tell the AI:
Commit my changes to GitHub with a good commit message
Push my code to GitHub for backup
Show me the git history / undo my last change
Pro tip: Add this to your CLAUDE.md or AGENTS.md so the AI always remembers:
Always commit important changes to GitHub for backup and potential rollback.
Get started: github.com (sign up free)
What: Free hosting for simple HTML/CSS/JS websites Best for: Portfolio sites, landing pages, documentation, simple projects
Just tell the AI:
Publish this website to GitHub Pages
What: Free hosting for web applications with backend features Best for: React apps, Next.js, dynamic websites, apps with APIs
Just tell the AI:
Deploy this app to Vercel
Which one to use?
What: Send/receive email from terminal Why useful:
Tools: Himalaya CLI, mutt, or similar Requires: Email account credentials (app password for Gmail)
| Command | What it does | How to remember |
|---|---|---|
pwd |
Shows current folder | “Print Working Directory” |
ls |
Lists files here | “List Stuff” |
cd folder |
Go into folder | “Change Directory” |
cd .. |
Go back one level | “..” means parent |
TAB |
Autocomplete! | Just press TAB |
Forgot a command? Ask AI: “What’s the terminal command to [what you want to do]?”
| Command | What it does |
|---|---|
/help |
Show all commands |
/init |
Create CLAUDE.md for project |
/compact |
Compress conversation (save memory) |
/clear |
Start fresh |
/cost |
Show token usage |
/model |
Switch AI model |
/mcp |
Manage MCP servers |
Context Window: AI’s short-term memory. Use
/compact when conversations get long.
Just tell the AI what you want:
| What you want | Say this |
|---|---|
| See what changed | “What files did I change?” |
| Save your work | “Commit my changes” |
| Backup to GitHub | “Push to GitHub” |
| Get latest code | “Pull from GitHub” |
| See history | “Show git history” |
| Undo changes | “Undo my last commit” |
Golden rule: Tell the AI to commit before trying something risky. You can always go back!
Add this to your CLAUDE.md or AGENTS.md so the AI writes good code:
Follow these coding principles:
- DRY (Don't Repeat Yourself) - use functions instead of repeating code
- KISS (Keep It Simple) - clear code beats clever code
- MODULAR - small files, small functions, easy to understand
There are 3 ways to add capabilities to your AI assistant. Each works differently:
| Type | What it is | Best for |
|---|---|---|
| MCP | External server adding capabilities | Browser automation, databases, APIs |
| Plugin | Pre-built tool from marketplace | Debugging, DevTools, quick installs |
| Skill | Custom reusable prompt you create | Your own workflows, repeated tasks |
What: MCPs are external servers that give your AI new superpowers - like controlling browsers, accessing databases, or connecting to external services.
What it does: Control web browsers automatically - take screenshots, fill forms, click buttons, scrape data.
Install via CLI (recommended):
claude mcp add playwright -- npx @playwright/mcp@latestOr tell the AI:
Install the Playwright MCP from https://github.com/microsoft/playwright-mcp
Then restart Claude Code:
/exit
claudeExample uses:
Take a screenshot of google.com
Fill out the login form on mysite.com
Scrape all product prices from this shopping page
GitHub: github.com/microsoft/playwright-mcp
What it does: Debug websites directly from Claude Code - inspect elements, view console errors, monitor network requests.
Install via CLI:
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latestOr tell the AI:
Install the Chrome DevTools MCP
Then restart Claude Code:
/exit
claudeExample uses:
Open DevTools and inspect my website
Show me the console errors on this page
Check what network requests this page is making
GitHub: github.com/anthropics/claude-code-devtools
What it does: Send and receive messages via the SimpleMessage API - a demo of creating your own MCP.
API Documentation: simplemessage.franzai.com/api/docs
Tell the AI to create it:
Create an MCP server for SimpleMessage. Read the API docs at https://simplemessage.franzai.com/api/docs and create an MCP that can post and read messages.
| Command | What it does |
|---|---|
claude mcp add NAME -- COMMAND |
Install an MCP |
claude mcp list |
List installed MCPs |
claude mcp remove NAME |
Remove an MCP |
/mcp |
Interactive MCP menu (inside Claude Code) |
Important: After installing any MCP, you MUST
restart Claude Code with /exit then claude
Official MCP docs: modelcontextprotocol.io
What: Plugins are pre-built tools you can install from a marketplace. Easier than MCPs - no server setup needed.
Popular Plugins:
How to install a plugin:
Step 1: Browse available plugins:
/plugins
or tell the AI:
Show me available plugins
Step 2: Install what you need:
Install the Chrome DevTools plugin
Step 3: Use it immediately (no restart needed for most plugins):
Open Chrome DevTools and inspect this page
The difference from MCPs: Plugins are simpler - they’re bundled and ready to use. MCPs are more powerful but need more setup.
What: Skills are custom reusable prompts YOU create. Think of them as saved instructions that the AI remembers.
Why create skills?
How to create a skill:
Step 1: Tell the AI to create one:
Create a skill called "code-review" that reviews my code for bugs, security issues, and suggests improvements. Save it so I can use it anytime.
Step 2: The AI creates a skill file in
.claude/skills/
Step 3: Use your skill anytime:
/code-review
or
Use the code-review skill on my current file
Example skills to create:
Create a skill that writes git commit messages in a consistent format
Create a skill that generates unit tests for any function I select
Create a skill that explains code to beginners
Pro tip: Add to your CLAUDE.md file:
When I say "review this", use the code-review skill automatically.
Tell the AI:
Never put API keys directly in code. Use environment variables and keep them safe.
Pro tip: Add this to your CLAUDE.md or AGENTS.md so the AI always remembers:
Never expose API keys in code. Always use environment variables and add .env to .gitignore.
Don’t ask how - just tell it what you want:
/exit and
restart)Start simple, add complexity:
claude → Start Claude Codeclaude --dangerously-skip-permissions → YOLO modecodex --yolo → Codex YOLO modecd folder → Go to foldercd .. → Go backpwd → Where am I?ls → What’s here?TAB → Autocomplete!/help → Show commands/init → Create CLAUDE.md/compact → Save memory/clear → Start fresh/cost → Token usage/exit → Exit (needed after installing MCP)| Resource | Link |
|---|---|
| Claude Code Docs | code.claude.com/docs |
| Claude Code CLI Reference | cli-reference |
| Claude Code GitHub | github.com/anthropics/claude-code |
| OpenAI Codex | github.com/openai/codex |
| Codex CLI Reference | developers.openai.com |
| GitHub | github.com |
| Vercel | vercel.com |
| Node.js | nodejs.org |
| MCP Protocol | modelcontextprotocol.io |
You did it! Now go build something. Start simple, ask AI for help, and keep practicing.
Franz Enzenhofer Vibe Coding Workshop